<template>
    <div class="cmt-container">
        <h3>发表评论</h3>
        <hr>
        <textarea v-model="msg" placeholder="亲,请输入你要BB的内容(仅限吐槽120字)" maxlength="120"></textarea>
        <mt-button type="primary" size="large" @click="postcomment">发表评论</mt-button>
        <div class="cmt-list" v-for="(item,i) in comments" :key="item.i">
            <div class="cmt-item">
                <div class="cmt-title">
                    第{{ i+1 }}楼 &nbsp; 用户:{{ item.user_name }} &nbsp; &nbsp; 发表时间:{{ item.add_time | dateFormat }}
                </div>
                <div class="cmt-body">
                    {{ item.content === '' ? '此用户很懒，一个字没打' : item.content }}
                </div>
            </div>
        </div>
        <mt-button id="tc" type="danger" size="large" plain @click="nextpage()">吐槽更多</mt-button>
    </div>
</template>

<script>
import { Toast } from 'mint-ui';
export default {
    data(){
        return{
            pageindex:1,//默认展示第一页数据
            comments:[],//所有评论数据
            msg:""
        }
    },
    created(){
        this.getcomment();
    },
    methods:{
        getcomment(){//获取评论
            this.$http.get("http://www.liulongbin.top:3005/api/getcomments/"+this.id+"?pageindex="+this.pageindex).then(result=>{
                if(result.body.status === 0){
                    //this.comments = result.body.message;
                    //每当获取新评论的时候不要把老数据清空，应当将新数据拼接上老数据
                    this.comments = this.comments.concat(result.body.message);
                }else{
                    Toast("获取评论失败")
                }
            })
        },
        nextpage(){//加载更多
            this.pageindex++;
            this.getcomment();
        },
        postcomment(){//自己评论的数据
            if(this.msg == ""){
               return Toast("内容为空！");
                
            }
            var cmt = {
                        user_name:'匿名用户',
                        add_time:Date.now(),
                        content:this.msg.trim()
                    };
            this.comments.unshift(cmt);
            this.msg="";
        }
    },
    props:["id"]
}
</script>

<style lang="scss" scoped>
.cmt-container{
    #tc{
        margin-top: 10px;
    }
    h3{
        font-size: 18px;
    }
    textarea{
        font-size: 14px;
        height: 85px;
        margin: 0;
    }
    .cmt-list{
        padding-top: 10px;
        .cmt-item{
            .cmt-title{
                font-size: 13px;
                background: #cccccc;
                height: 30px;
                line-height: 30px;
            }
            .cmt-body{
                margin:8px 0px -3px 21px;
                font-size: 15px;
                text-indent: 2em;
            }
        }
    }
}
</style>
